<template>
	<view class="web">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<navBar :title="'系统公告'"></navBar>
		</view>
		<view class="head">
			<view class="content">
				<view class="content_head">
					<view class="new_title">更新完成</view>
					<view class="time">2022-11-11</view>
				</view>
				<view class="tip">系统更新完成，欢迎您的体验！</view>
			</view>
		</view>
		<view class="tail">
			<view class="content">
				<view class="content_head">
					<view class="new_title">系统更新</view>
					<view class="time">2022-11-11</view>
				</view>
				<view class="tip">系统通知：为了更好的用户体验，将在2022年12月12日进行系统用户更新</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Fn from '@/common/public.js';
	import navBar from "@/components/NavBar.vue" // 导入顶部导航
	export default {
		components: {
			navBar
		},
		data() {
			return {}
		}
	}
</script>

<style>
	.web {
		display: block;
		height: 100vh;
	}

	.head {
		display: flex;
		padding: 10px 10px;
		width: auto;
	}

	.content {
		display: block;
		width: 100%;
		padding: 5px 0;
	}

	.content_head {
		display: flex;
		padding: 5px 10px;
	}

	.new_title {
		display: block;
		text-align: center;
		color: #25365A;
		font-size: 15px;
		font-weight: bold;
		letter-spacing: 1px;
	}

	.time {
		display: block;
		text-align: right;
		margin-left: 57%;
		font-size: 13px;
		color: #25365A50;
	}

	.tip {
		text-align: left;
		font-size: 13px;
		width: 262px;
		color: #25365A50;
		padding: 0 0 0 10px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.tail {
		display: flex;
		padding: 10px 10px;
	}

	.tail .tail_left {
		width: 20%;
		height: auto;
		text-align: right;
		margin-right: 10px;
	}
</style>
